<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-button type="success" style="margin-bottom: 24px;" @click="CreateMenu">新增菜单</el-button>
            </el-col>
        </el-row>
        <el-table size="mini" cell-class-name="treeCol" :data="tableData" class="treeTable" style="width: 100%;margin-bottom: 20px;"
            row-key="menuId" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="menuName" label="菜单名称" sortable>
            </el-table-column>
            <el-table-column prop="route" label="链接URL">
            </el-table-column>
            <el-table-column prop="componentPath" label="组件路径">
            </el-table-column>
            <el-table-column prop="isShow" label="是否显示">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
                <template slot-scope="scope">
                    {{moment(scope.row.createTime).format('YYYY-MM-DD')}}
                </template>
            </el-table-column>
            <el-table-column prop="createByName" label="创建人">
            </el-table-column>
            <el-table-column label="操作" width="260">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">添加子级</el-button>
                    <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="添加菜单" :visible.sync="dialogMenuVisible">
            <menu-create ref="menuCreate" @OnSave="SaveData"></menu-create>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogMenuVisible = false">取 消</el-button>
                <el-button type="primary" @click="Save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from '../../util/request';
    import moment from 'moment';
    import MenuCreate from './MenuCreate';
    export default {
        name: 'CodeUIMenuList',
        components: {
            MenuCreate
        },
        data() {
            return {
                tableData: [],
                moment: moment,
                dialogMenuVisible: false
            };
        },

        mounted() {
            axios.get('/api/menu').then(m => {
                this.tableData = m.data;
            });
        },

        methods: {
            CreateMenu() {
                this.dialogMenuVisible = true;
            },
            SaveData() {

            },
            Save() {
                this.$refs.menuCreate.submitForm('ruleForm');
            }
        },
    };
</script>

<style scoped>
    .treeCol div.cell {
        text-align: center;
    }
</style>